<template>
  <div class="silver-fill-detail">
    <div class="go-back">
      <el-button type="primary" @click="goback()">返回</el-button>
    </div>
    <div class="notice-title">
      <h3>商户详情</h3>
      <p>签约名：{{ysInfo.sign_name}}</p>
      <p>商户编号：{{ysInfo.merchant_no}}</p>
      <p>展示名称：{{ysInfo.merchant_name}}</p>
      <p>签约名：{{ysInfo.sign_name}}</p>
      <p>商户类型：{{ysInfo.merchant_type_name}}</p>
      <p>结算类型：{{ysInfo.account_type_name}}</p>
    </div>
    <el-collapse v-model="activeNames">
      <el-collapse-item name="1">
        <template slot="title">
          <div class="info-title">
            基本信息&nbsp;
            <i v-if="this.activeNames.includes('1')" class="iconfont iconshanglajiantou"></i>
            <i v-else class="iconfont iconxialajiantou"></i>
          </div>
        </template>
        <div class="info-content">
          <p>所在省份：{{ysInfo.province_name}}</p>
          <p>所在城市：{{ysInfo.city_name}}</p>
          <p>所在区县：{{ysInfo.district_name}}</p>
          <p>具体地址：{{ysInfo.address}}</p>
          <p>联系人：{{ysInfo.linkman_name}}</p>
          <p>联系人身份证号：{{ysInfo.linkman_idcard_no}}</p>
          <p>联系电话：{{ysInfo.linkman_phone}}</p>
          <p>联系邮箱：{{ysInfo.email}}</p>
        </div>
      </el-collapse-item>
      <el-collapse-item name="2">
        <template slot="title">
          <div class="info-title">
            法人信息&nbsp;
            <i v-if="this.activeNames.includes('2')" class="iconfont iconshanglajiantou"></i>
            <i v-else class="iconfont iconxialajiantou"></i>
          </div>
        </template>
        <div class="info-content">
          <p>法人姓名：{{ysInfo.lp_name}}</p>
          <p>法人身份证号：{{ysInfo.lp_idcard_no}}</p>
          <p>身份证有效期：{{ysInfo.lp_idcard_date}}</p>
          <p>
            <span class="label">法人身份证正面照：</span>
            <Img :src="ysInfo.lp_idcard_front" alt />
          </p>
          <p>
            <span class="label">法人身份证反面照：</span>
            <Img :src="ysInfo.lp_idcard_backend" alt />
          </p>
        </div>
      </el-collapse-item>
      <el-collapse-item name="3">
        <template slot="title">
          <div class="info-title">
            营业信息&nbsp;
            <i v-if="this.activeNames.includes('3')" class="iconfont iconshanglajiantou"></i>
            <i v-else class="iconfont iconxialajiantou"></i>
          </div>
        </template>
        <div class="info-content">
          <p>是否是三证合一?：{{ysInfo.is_unified_type?'是':'否'}}</p>
          <p>营业执照号：{{ysInfo.business_license_no}}</p>
          <p>营业执照有效期：{{ysInfo.business_date_line}}</p>
          <p v-if="ysInfo.is_unified_type">
            <span class="label">三证合一证书：</span>
            <Img :src="ysInfo.unified_certificate" alt />
          </p>
          <p v-if="!ysInfo.is_unified_type">组织机构代码：{{ysInfo.org_code}}</p>
          <p v-if="!ysInfo.is_unified_type">
            <span class="label">营业执照或登记证书：</span>
            <Img :src="ysInfo.business_license" alt />
          </p>
          <p v-if="!ysInfo.is_unified_type">
            <span class="label">税务登记证：</span>
            <Img :src="ysInfo.tax_reg_certificate" alt />
          </p>
          <p>
            <span class="label">开户许可证：</span>
            <Img :src="ysInfo.permit_bank_account" alt />
          </p>
          <p>
            <span class="label">特殊资质：</span>
            <Img :src="ysInfo.special_other_license" alt />
          </p>
          <p>
            <span class="label">门头照：</span>
            <Img :src="ysInfo.sign_board" alt />
          </p>
          <p>
            <span class="label">收银台照：</span>
            <Img :src="ysInfo.cashier_photo" alt />
          </p>
          <p>
            <span class="label">室内照：</span>
            <Img :src="ysInfo.interior_photo" alt />
          </p>
        </div>
      </el-collapse-item>
      <el-collapse-item name="4">
        <template slot="title">
          <div class="info-title">
            结算信息&nbsp;
            <i v-if="this.activeNames.includes('4')" class="iconfont iconshanglajiantou"></i>
            <i v-else class="iconfont iconxialajiantou"></i>
          </div>
        </template>
        <div class="info-content">
          <p>结算类型：{{ysInfo.settle_type_name}}</p>
          <p>开户人：{{ysInfo.holder_name }}</p>
          <p>开户银行：{{ysInfo.bank_name}}</p>
          <p>开户支行：{{ysInfo.branch_name }}</p>
          <p>开户银行卡号：{{ysInfo.card_no}}</p>
          <p>审核时间：{{ysInfo.audited_at||ysInfo.audited_at===0?formatDate(ysInfo.audited_at):''}}</p>
          <p>创建时间：{{ysInfo.created_at||ysInfo.created_at===0?formatDate(ysInfo.created_at):''}}</p>
          <p>
            <span class="label">结算账户指定书：</span>
            <Img :src="ysInfo.auth_for_settlement" alt />
          </p>
          <p>
            <span class="label">结算人身份证正面照：</span>
            <Img :src="ysInfo.settler_idcard_front" alt />
          </p>
          <p>
            <span class="label">结算人身份证反面照：</span>
            <Img :src="ysInfo.settler_idcard_backend" alt />
          </p>
          <p>
            <span class="label">结算卡照：</span>
            <Img :src="ysInfo.settle_bankcard" />
          </p>
        </div>
      </el-collapse-item>
    </el-collapse>
    <div class="footer"></div>
  </div>
</template>

<script>
// 合利宝进件-进件详情
import { ysDetail } from '@/api/report-admin/silver-fill-detail'
import Img from '@/components/img/img'
import { date } from '@/utils'
export default {
  components: {
    Img
  },
  data() {
    return {
      activeNames: ['1', '2', '3', '4'],
      ysInfo: {}
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      const { id } = vm.$route.query
      vm.id = id
      vm.getDetail(id)
    })
  },
  beforeRouteLeave(to, from, next) {
    Object.assign(this.$data, this.$options.data())
    next()
  },
  methods: {
    formatDate: date.formatDate,
    // 获取详情
    getDetail(id) {
      ysDetail(id).then(res => {
        this.ysInfo = res
      })
    },
    // 返回上级
    goback() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.silver-fill-detail {
  width: 100%;
  height: 100%;
  .go-back {
    width: 100%;
    display: flex;
    justify-items: flex-start;
    align-items: center;
    margin: 0 0 15px 0;
  }
  .notice-title {
    display: flex;
    justify-content: flex-start;
    text-align: left;
    flex-wrap: wrap;
    h3 {
      width: 100%;
      margin-bottom: 10px;
    }
    p {
      width: 50%;
      min-width: 400px;
      margin: 10px 0;
      font-size: 14px;
    }
  }
  .info-title {
    font-size: 18px;
    font-weight: bold;
  }
  .info-content {
    display: flex;
    justify-content: flex-start;
    text-align: left;
    flex-wrap: wrap;
    p {
      width: 33.33%;
      min-width: 400px;
      margin: 5px 0;
      font-size: 13px;
      display: flex;
      justify-content: flex-start;
      span {
        width: 80px;
      }
      img {
        margin: 10px;
        width: 220px;
        height: 130px;
        background: rgb(207, 191, 191);
        border-radius: 8px;
      }
    }
  }
  .footer {
    display: flex;
    justify-content: flex-end;
    box-sizing: border-box;
    padding: 0 80px;
    width: 500px;
    align-items: center;
    margin: 30px 0px 80px auto;
    .cancel {
      margin-right: 25px;
    }
  }
}
</style>